body {
    height: 600px;
}

#container {
    height: 80%;
    display: grid;
    /* grid-template-columns: repeat(3, 100px);
    grid-template-rows: repeat(3, 100px);
    grid-auto-flow: row dense; */
    justify-items: stretch;
    align-items: stretch;
    /* //////////////////////////////// */
    /* align-content: start;
    justify-content: space-evenly ; */
    place-content: center space-evenly;
    /* grid-row-gap: 100px;
    grid-column-gap: 100px; */
    /* grid-gap:20px 20px; */
    /* grid-template-areas: "header1 . header3"
                     "main1 main2 sidebar3"
                     "footer1 footer2 footer3"; */
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-auto-rows: 100px;
    
}

.item {
    font-size: 4em;
    text-align: center;
    border: 1px solid #e5e4e9;
}

.item-1 {
    
    background-color: #ef342a;
}

.item-2 {
    background-color: #f68f26;
}

.item-3 {
    background-color: #2b302b;
}

.item-4 {
    background-color: #0376c2;
    place-self:center center;
}

.item-5 {
    grid-row-end: span 2;
    background-color: #c077af;
}

.item-6 {
    justify-self:center;
    align-self: center;
    background-color: #f8d29d;
}

.item-7 {
    background-color: #b5a87f;
}

.item-8 {
    background-color: #d0e4a9;
    grid-row-start: 4;
    grid-column-start: 2;
}

.item-9 {
    background-color: #4dc7ec;
    grid-row-start: 5;
    grid-column-start: 3;
    /* grid-area: header-end; */
    /* grid-column-start:1;
    grid-row-start:3; */
    /* grid-row-end: 4;
    grid-column: 4; */
}